import TwinSpace from "twinspace";
import clockPanFrag from "./shader/clockPan.frag";
import clockPanVert from "./shader/clockPan.vert";

let TClock;
//创建webGL3D场景
const initScene = (divID) => {
  TClock = new TwinSpace(divID);
  window.TClock = TClock;
  TClock.camera.near = 1;
  TClock.camera.far = 1000;
  TClock.camera.updateProjectionMatrix();
  TClock.removeStats();
  // TClock.addAxes(100);
  TClock.scene.background = TClock.loadTexture(
    "texture",
    "./clockImage/SceneBackground.png"
  );
  // TClock.control.enabled = false;
  TClock.camera.position.set(0, 0, 300);
  TClock.camera.lookAt(0, 0, 0);
  window.addEventListener("mousemove", mouseMoveView, false);

  createClockModel();
};

//销毁webGL3D场景
const destroyScene = () => {
  window.removeEventListener("mousemove", mouseMoveView, false);
  TClock.destroy();
};

let p = 0;

//开始创建面片
const clockPlane = (url) => {
  const geometry = TClock.setGeometry("plane", { height: 200, width: 200 });
  const material = TClock.setMaterial("shader", {
    uniforms: {
      maps: { value: TClock.loadTexture("texture", url) },
    },
    fragmentShader: clockPanFrag,
    vertexShader: clockPanVert,
    transparent: true,
    side: TClock.THREE.DoubleSide,
  });

  // const material = TClock.setMaterial("basic", {
  //   // map: TClock.loadTexture("texture", url),
  //   color: "red",
  //   wireframe: true,
  //   transparent: true,
  //   side: TClock.THREE.DoubleSide,
  // });

  const mesh = TClock.setMesh(geometry, material);
  // mesh.visible = false;
  if (p % 2) {
    mesh.position.z += 20 * Math.random();
  }
  p += 1;

  return mesh;
};

let updateCirclePos, updateCirclePos2;
//开始创建时钟
const createClockModel = () => {
  const clockMain = new TClock.THREE.Group();

  const dial = clockPlane("./clockImage/dial.png");
  clockMain.add(dial);
  const circle1 = clockPlane("./clockImage/circle1.png");
  clockMain.add(circle1);
  const circle2 = clockPlane("./clockImage/circle2.png");
  clockMain.add(circle2);
  const circle3 = clockPlane("./clockImage/circle3.png");
  clockMain.add(circle3);
  const circle4 = clockPlane("./clockImage/circle4.png");
  clockMain.add(circle4);
  const circle5 = clockPlane("./clockImage/circle5.png");
  clockMain.add(circle5);
  const centerCircle = clockPlane("./clockImage/centerCircle.png");
  clockMain.add(centerCircle);

  // const timeNum = clockPlane("./clockImage/timeNum.png");
  // clockMain.add(timeNum);

  //指针
  const sec = clockPlane("./clockImage/sec.png");
  clockMain.add(sec);

  const min = clockPlane("./clockImage/min.png");
  clockMain.add(min);

  const hour = clockPlane("./clockImage/hour.png");
  clockMain.add(hour);

  TClock.scene.add(clockMain);

  //计算时间更新
  const clockUpdate = () => {
    // 创建一个 Date 对象实例，它将自动设置为当前时间
    const now = new Date();
    // 获取当前的小时（0 到 23）
    const hours = now.getHours();
    hour.rotation.z = -Math.PI * 2 * (hours / 12);
    // 获取当前的分钟（0 到 59）
    const minutes = now.getMinutes();
    min.rotation.z = -Math.PI * 2 * (minutes / 60);
    // 获取当前的秒钟（0 到 59）
    const seconds = now.getSeconds();
    sec.rotation.z = -Math.PI * 2 * (seconds / 60);
  };

  let num = 0;
  let way = 1;
  let rotateSpeed = 1;
  // let scale = 0;
  //更新转圈圈动画
  const updateAnimate = (delta) => {
    num += way;
    if (Math.abs(num) == 100) {
      way = -way;
    }

    circle1.rotation.z -= Math.sin(num / (1000 / rotateSpeed)) * 0.5;
    circle2.rotation.z +=
      Math.sin(num / (1000 / rotateSpeed)) * Math.cos(num / 100) * 2;
    circle3.rotation.z += Math.sin(num / (2000 / rotateSpeed)) * 2;
    circle4.rotation.z -= Math.sin(num / (1000 / rotateSpeed));
    circle5.rotation.z += Math.sin(num / (500 / rotateSpeed)) * 0.1;
  };

  let num2 = 0;
  let way2 = 1;
  //更新环的位置
  const updatePosition = () => {
    num2 += 1 * way2;
    if (Math.abs(num2) == 100) {
      way2 = -way2;
    }
    circle1.position.z += Math.sin(num2 / 100) * 1;
    circle2.position.z -= Math.sin(num2 / 200) * 0.9;
    circle3.position.z += Math.sin(num2 / 100) * 0.5;
    circle4.position.z -= Math.sin(num2 / 200) * 0.45;
    circle5.position.z += Math.sin(num2 / 500) * 0.5;
    centerCircle.position.z -= Math.sin(num2 / 50) * 0.5;

    // circle1.position.z *= scale;
    // circle2.position.z *= scale;
    // circle3.position.z *= scale;
    // circle4.position.z *= scale;
    // circle5.position.z *= scale;
    // centerCircle.position.z *= scale;
  };

  let countTimes = 0;
  let way3 = 150;
  //更新模型的位置2
  const updatePosition2 = (delta) => {
    countTimes += delta;
    circle1.position.z = Math.sin(countTimes / 2) * way3 * 1.5;
    circle2.position.z = -Math.sin(countTimes / 2 + 0.2) * way3 * 1.3;
    circle3.position.z = Math.sin(countTimes / 2 + 0.1) * way3 * 1;
    circle4.position.z = -Math.sin(countTimes / 2 + 0.3) * way3 * 0.5;
    circle5.position.z = Math.sin(countTimes / 2 + 0.2) * way3 * 0.4;
    centerCircle.position.z = -Math.sin(countTimes / 2 + 0.1) * way3 * 0.2;
    min.position.z = Math.sin(countTimes / 2) * way3 * 0.25;
    hour.position.z = -Math.sin(countTimes / 2) * way3 * 0.25;
  };

  //一个新的更新圆环位置的方法
  updateCirclePos = (val) => {
    // scale = val;
    circle1.position.z = Math.sin(val) * 100;
    circle2.position.z = -Math.sin(val) * 100;
    circle3.position.z = Math.sin(val) * 150;
    circle4.position.z = -Math.sin(val) * 150;
    circle5.position.z = Math.sin(val) * 80;
    centerCircle.position.z = -Math.sin(val) * 40;
  };

  //更新圆环更新位置
  updateCirclePos2 = (val) => {
    way3 = 150 * val;
    rotateSpeed = val;
    // console.log(rotateSpeed);
  };

  TClock.updateEvent(clockUpdate);
  TClock.updateEvent(updateAnimate);
  // //// TClock.updateEvent(updatePosition);
  TClock.updateEvent(updatePosition2);
};

//鼠标移动监听
const mouseMoveView = (event) => {
  let posX = event.clientX / TClock.renderer.domElement.clientWidth;
  posX -= 0.5;
  let posY = event.clientY / TClock.renderer.domElement.clientHeight;
  posY -= 0.5;
  TClock.camera.position.x = posX * 800;
  TClock.camera.position.y = -posY * 800;
  TClock.camera.lookAt(0, 0, 0);
  if (typeof updateCirclePos === "function") {
    updateCirclePos2(posX);
  }
};

export { initScene, destroyScene, mouseMoveView };
